<template>
  <div class="ChatSetting">
    <n-space v-if="!isTauri()">
      <n-dropdown trigger="click" :options="ObjectToArrayF<FormTemplatesOption>(chatSettings)?.map((e) => {
      return {
        key: e.key,
        label: e.label
      }
    })" @select="handleSelect">
        <c-button v-if="chatSettings" quaternary iconName="SettingsFilled"></c-button>
      </n-dropdown>
    </n-space>
    <c-button v-if="chatSettings && isTauri()" @click="handleSelect()" quaternary iconName="SettingsFilled"></c-button>
    <ChatSettingLog ref="log" />
  </div>
</template>

<script setup lang='ts'>
const ObjectToArrayF = ObjectToArray
const { chatSettings } = storeToRefs(chatSettingStore())
const { isTauri, createWindow, showWindow } = Tauri
const log = ref()
const handleSelect = (e?: FormTemplatesKey) => {
  if (isTauri()) {
    createWindow({ width: 800, height: 800, label: 'ChatSetting', title: 'ChatSetting', url: '/#/ChatSetting' })
    showWindow('ChatSetting')
  } else {
    log.value.show(e)
  }
}

</script>
